<template>
<el-scrollbar>
  <el-form
    ref="ruleForm"
    :model="ruleForm"
    :rules="rules"
    label-width="120px"
    class="demo-ruleForm"
  >
    <el-form-item label="场地名称" prop="title">
      <el-input v-model="ruleForm.title"></el-input>
    </el-form-item>
    <el-form-item label="所属地区" prop="diqu_id">
      <el-cascader
        v-model="ruleForm.diqu_id"
        :options="diqu"
       placeholder="请选择地区"
      ></el-cascader>
    </el-form-item>

    <el-form-item label="多图">
      <el-upload
        action="/g/index/up"
        list-type="picture-card"
        multiple="true"
        :on-preview="yulan"
        :on-remove="del_imgs"
        :on-success='up_oks'
        :on-exceed='chaochu_msgs'
        limit='6'
      >
        <el-icon><plus /></el-icon>
      </el-upload>
      <el-dialog v-model="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="" />
      </el-dialog>
    </el-form-item>

    <el-form-item label="描述" prop="miaoshu">
      <el-input v-model="ruleForm.miaoshu"></el-input>
    </el-form-item>
    <el-form-item label="经度" prop="lon">
      <el-input v-model="ruleForm.lon" type="textarea" rows="1"></el-input>
    </el-form-item>
    <el-form-item label="纬度" prop="lat">
      <el-input v-model="ruleForm.lat" type="textarea" rows="1"></el-input>
    </el-form-item>
    <el-form-item label="全景地址" prop="quanjing">
      <el-input v-model="ruleForm.quanjing" type="textarea" rows="2"></el-input>
    </el-form-item>
    <el-form-item label="视频地址" prop="video">
      <el-input v-model="ruleForm.video" type="textarea" rows="2"></el-input>
    </el-form-item>

    <el-form-item label="地址" prop="dizhi">
      <el-input v-model="ruleForm.dizhi" type="textarea" rows="2"></el-input>
    </el-form-item>
    <el-form-item label="关键字" prop="guanjianzi">
      <el-input v-model="ruleForm.guanjianzi" type="textarea" rows="2"></el-input>
    </el-form-item>
    <el-form-item label="详情" prop="info">
      <el-input v-model="ruleForm.info" type="textarea" rows="5"></el-input>
    </el-form-item>
    
    <el-form-item>
      <el-button type="primary" @click="submitForm('ruleForm')"
        >确认</el-button
      >
    </el-form-item>
  </el-form>
</el-scrollbar>
</template>

<script scoped>
import { Plus } from '@element-plus/icons'
import { ElMessage,ElLoading } from 'element-plus'
import {request} from '../api/request.js'
import { onMounted, onBeforeUnmount, ref, reactive } from 'vue';
export default {
  components: {
    Plus,
  },
  props:['id'],
  data() {
    return {
      token:window.sessionStorage.getItem('token'),
      diqu:[],
      ruleForm: {
        title: '',
        diqu_id: '',
        info: '',
        miaoshu: '',
        guanjianzi: '',
        dizhi: '',
        lat: '',
        lon: '',
        quanjing: '',
        video: '',
        img: [],
        id:0
      },
      rules: {
        title: [
          {
            required: true,
            message: '请填写名称',
            trigger: 'blur',
          }
        ],
        
      },
    }
  },
  mounted(){
    this.jiazai()
    if(this.id > 0){
      this.get_info(this.id)
    }
  },
  setup(){
  },
  methods: {
    jiazai(){
      request("/g/info/get_diqu", this.ruleForm, res => {
                console.log(res);
                if (res.ing == 1) {
                    this.diqu=res.data
                }
            }, err => {
                
            });
    },
    get_info(id){
      request("/g/info/get_changdi_info", {token:this.token,id:id}, res => {
                console.log(res);
                if (res.ing == 1) {
                    this.ruleForm=res.data
                    this.setEditor(res.data.info);
                }
            }, err => {
                
            });
    },
    fuwei(){
      this.ruleForm={
        title: '',
        diqu_id: '',
        info: '',
        miaoshu: '',
        guanjianzi: '',
        dizhi: '',
        lat: '',
        lon: '',
        quanjing: '',
        video: '',
        img: [],
        id:0
      };
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // alert('submit!')
          this.ruleForm.token=this.token;
          const loadingInstance = ElLoading.service();
            request("/g/info/add_changdi", this.ruleForm, res => {
                loadingInstance.close();
                console.log(res);
                if (res.ing == 1) {
                    ElMessage.success(res.msg);
                    //通知父组件刷新并关闭抽屉 发送一个shuaxin指令
                    this.fuwei();
                    this.$emit('shuaxin')
                }
                else {
                    ElMessage.error(res.msg);
                }
            }, err => {
                loadingInstance.close();
                ElMessage.error(err.msg);
            });
          

        } else {
          return false
        }
      })
    },
    del_img(){
      this.ruleForm.img=''
    },
    del_imgs(file,filelist){
      console.log(file)
      console.log(filelist)
      var imgs=[];
      filelist.forEach((v)=>{
        imgs.push(v.response.data.url)
      })
      this.ruleForm.imgs=imgs
    },
    up_ok(data,file,filelist){
      console.log(data)
      if(data.ing==1){
        this.ruleForm.img=data.data.url
      }
      
    },
    up_oks(data,file,filelist){
      console.log(data)
      if(data.ing==1){
        this.ruleForm.imgs.push(data.data.url)
      }
      
    },
    chaochu_msg(file){
      ElMessage.error('只能上传一张')
    },
    chaochu_msgs(file){
      ElMessage.error('最多只能上传6张')
    }
  },
}
</script>

<style scoped>
.demo-ruleForm{text-align: left;}
</style>